<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router";
/*响应式*/
const name = ref("lisi") /*{value:"lisi"}*/
const clazz = 'zzx'
const msg= '<span style="color: blue">v-html指令</span>'
const score = 100

const arr = ref([1,2,3,4,5])

const id = 6
const jump=()=>{
  alert("单击事件出发了")
  arr.value.push(name.value)
  console.log(arr)
}
const route = useRoute();

const idstr = route.query


</script>
<!--差值表达式 {{}}  把值插入在标签内-->
<!--v- 为前缀的特殊指令-->
<!--v-text :把内容显示在标签内-->
<!--v-html :把内容显示在标签内 能解析html标签-->
<!--v-if :控制标签是否存在-->
<!--v-show :控制标签是否显示-->
<!--v-for :用于循环遍历-->
<!--v-bind :动态绑定属性  简写:-->
<!--v-on ：绑定事件  简写@-->
<!--v-model :双向绑定-->
<template>
  <h1>超级漂亮的yhy</h1>
  <h2>{{clazz}}</h2>
  <h2 v-text="clazz"></h2>
  <h3 v-html="msg"></h3>
  <h3 v-if="score >90" v-text="msg"></h3>
  <h3 v-else>v-else</h3>
<!--  <h3 v-else-if="score<90">测试v-if</h3>-->
  <h3 v-show="score>90">score>90</h3>

  <div v-for="(item,index) in arr" :key="index">{{item}}</div>

  <div v-bind:id="id"></div>
  <div :id="id"></div> <!--简写-->

  <button v-on:click="jump()">按钮</button>
  <button @click="jump()">按钮1</button> <!--简写-->
<!--双向绑定-->
  <br>
  <input type="text" v-model="name">
  name表单项值：{{name}}
  路由id:{{idstr}}
</template>

<style scoped>
h1{
  color: aquamarine;
}
h2{
  color: turquoise;
}
</style>